<template>
	<view class="my-gift-detail">
		<view class="goods-main-img">
			<view class="main-img-wp flex_center">
				<image mode="widthFix" class="main-img" :src="orderInfo.pic">
				</image>
			</view>
			<view class="goods-info">
				<view class="title">
					{{orderInfo.prodName}}
				</view>
				<view class="price-wp">
					X{{orderInfo.num}} ({{orderInfo.units}})
				</view>
			</view>
		</view>
		<view class="receiving-information" v-if="orderInfo.takePeople">
			<view class="item flex_between_center">
				<view class="title1">
					收货人
				</view>
				<view class="title2">
					{{orderInfo.takePeople}}
				</view>
			</view>
			<view class="item flex_between_center">
				<view class="title1">
					联系电话
				</view>
				<view class="title2">
					{{orderInfo.mobile}}
				</view>
			</view>
			<view class="item flex_between_center">
				<view class="title1 ">
					收货地址
				</view>
				<view class="title2 ">
					{{orderInfo.address}}
				</view>
			</view>
		</view>
		<view class="nodata" v-else>
			好友尚未填写收货信息
		</view>

		<view class="btn-box">
			<u-button @click="copyInfo" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">一键复制</u-button>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				orderInfo: {},
				gooodsDetailImg: []

			};
		},
		onLoad(opt) {
			if (opt.id) {
				this.getOrderInfo(opt.id)
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			async getOrderInfo(id) {
				let res = await this.$api.getOrderDetail({
					id
				})
				if (res.success) {
					console.log(res.result);
					this.orderInfo = res.result
					let fileListImgs = []
					if (this.orderInfo.images && this.orderInfo.images.length > 0) {
						//只有一张图片
						if (this.orderInfo.images.indexOf(',') == -1) {
							fileListImgs.splice(0, 1, {
								url: this.orderInfo.images,
								filePath: this.orderInfo.images
							})
						} else {
							//多张图片
							fileListImgs = this.orderInfo.images.split(',')
						}
						this.gooodsDetailImg = fileListImgs.map(item => {
							if (item.length > 1) {
								let newItem = {
									url: item,
									filePath: item
								}
								return newItem
							}
						})
					}
				} else {
					this.orderInfo = {}
					uni.showToast({
						icon: 'none',
						title: res.message
					})
				}
			},
			copyInfo() {
				if (this.orderInfo) {
					let data =
						`收货人:${this.orderInfo.takePeople?this.orderInfo.takePeople:''},收货地址:${this.orderInfo.address?this.orderInfo.address:''},联系电话:${this.orderInfo.mobile?this.orderInfo.mobile:''}`
					uni.setClipboardData({
						data,
						fail: () => {
							uni.showToast({
								title: '复制出错',
								icon: 'none'
							})
						}

					});

				} else {
					uni.showToast({
						icon: '好友尚未填写收货信息',
						title: res.message
					})
				}

			},
		}
	}
</script>
<style lang="scss" scoped>
	.my-gift-detail {
		padding-bottom: 120rpx;

		.nodata {
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
			color: #4E5969;
			text-shadow: #1D2129;
		}

		.goods-main-img {
			.main-img {
				margin-top: 40rpx;
				width: 650rpx;
				box-shadow: 4rpx 4rpx 10rpx #f7f8fa;
			}

			.goods-info {
				margin-top: 10rpx;
				padding: 32rpx;

				.title {
					text-align: center;
					height: 44rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					text-align: center;
					margin-top: 10rpx;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #FF7D00;
					line-height: 50rpx;

				}
			}

			.padding-bar {
				height: 40rpx;
				background-color: #f7f8fa;
			}

		}

		.receiving-information {
			margin: 0 24rpx;

			.item {
				height: 100rpx;

				.title1 {
					width: 160rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #4E5969;
					line-height: 39rpx;
				}

				.title2 {
					text-align: right;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1D2129;
					line-height: 39rpx;

				}
			}
		}


		.btn-box {
			z-index: 999;
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			border: none;
			position: fixed;
			bottom: 20rpx;
			bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		}
	}
</style>